<template>
	<view class="yu-calendar">
		<div class="date_header_box">
			<div class="back_month"><image class="qiehuan_icn" src="../../static/icon/qiehuan_icn.png" mode=""></image> 收益率%</div>
			<div class="day_text"> 
				<image class="day_text_icn" @click="prevMonth" src="../../static/icon/up_icn.png" mode=""></image>
				<text>{{year}}-{{(month<=9?('0'+ (month+1)):(month+1))}}</text>
				<image class="day_text_icn"  @click="nextMonth" src="../../static/icon/next_icn.png" mode=""></image> 
			</div>
			<div class="next_month">更多</div>
		</div>
		<view class="yu-calendar-week" :style="{color:color}">
			<view class="list" v-for="(week,idx) in weeks" :key="idx">{{week}}</view>
		</view>
		<view class="yu-calendar-content">
			<view class="yu-calendar-day">
				
				<view :class="{
					list:true,
					item_dafult:!day.price,
					item_dafult_no:!day.price&&day.date == localDate,
					item_red:day.price&&day.isRed,
					item_green:day.price&&!day.isRed,
					item_today:day.price&&day.date == localDate&&day.isRed,
					item_today_green:day.price&&day.date == localDate&&!day.isRed
				}" v-for="(day,idx) in dayArr" :key="idx" @click="onClick(day,idx)">
					<view class="day" :style="{background :day.bgColor,color : day.color}" v-if="day.date != localDate">{{day.day}}</view>
					<view class="day" style="color: #ff4e22;" v-else>{{day.day}}</view>
					<view class="price" v-if="day.price">
						<span style="font-size: 26rpx;margin-top:-5rpx;margin-right: 1rpx;">{{day.isRed?'+':''}}</span>
						{{day.price}}%
					</view>
					<view class="price" v-else-if="!day.price && day.noIsTime" style="color: #999;">
						0.00
					</view>
				</view>
				<view class="local-month">{{selectMonth}}</view>
			</view>
		</view>
	</view>
</template>
<script>
	export default {
		name: 'yuCalendar',
		props: {
			priceList: { //价格日历数组
				type: [Array, Object],
				default: function() {
					return []
				}
			},
			bgColor: {
				type: String,
				default: function() {
					return '#f5f6f7'
				}
			},
			color: {
				type: String,
				default: function() {
					return '#000'
				}
			}
		},
		data() {
			return {
				date: new Date(), //获取系统日期
				localDate: '', //当前日期
				selectMonth: '', //选择的月份
				localColor: '', //今日的日期背景颜色
				weeks: ['周一', '周二', '周三', '周四', '周五'],
				dayArr: [], //月份天数
				year: '', //当前选择的年
				month: '', //当前选择的月
				status: 1
			}
		},
		mounted() {
			this.year = this.date.getFullYear();
			this.month = this.date.getMonth();
			this.initDate(this.date.getFullYear(), this.date.getMonth());
		},
		methods: {
			//初始化日期
			initDate(year, month) {
				let weekValue = '';
				let localYear = this.date.getFullYear();
				let localMonth = this.date.getMonth() + 1;
				let day = this.date.getDate();
				let totalDay = new Date(year, month + 1, 0).getDate();
				this.dayArr = [];
				this.selectMonth = month + 1;
				this.localDate = this.formatNum(localYear) + '-' + this.formatNum(localMonth) + '-' + this.formatNum(day);
				for (let i = 1; i <= totalDay; i++) {
					let dayDate = this.formatNum(year) + '-' + this.formatNum(month + 1) + '-' + this.formatNum(i);
					
					if(new Date(dayDate).getDay() != 0 && new Date(dayDate).getDay() != 6){
						let obj = {
							date: dayDate,
							day: i,
							price: '',
							bgColor: 'none',
							color: '#000',
							status: 1,
							isRed:false,
							noIsTime:new Date().getTime() > new Date(dayDate).getTime()
						}
						weekValue = (new Date(year, month, i)).getDay();
						if (i == 1 && weekValue != 0) {
							this.addBeforeValue(weekValue)
						}
						let index = this.priceList.findIndex((item) => {
							return item.date == dayDate
						})
						if (index >= 0) {
							obj.price = this.priceList[index].price;
							obj.isRed = this.priceList[index].isRed;
						}
						this.dayArr.push(obj);
						// if (i == totalDay) {
						// 	this.addAfterValue(weekValue+1)
						// }
					}
					
				}
			},
			//补充前面空白日期
			addBeforeValue(weekValue) {
				let totalDay = new Date(this.year, this.month, 0).getDate();
				for (let i = 0; i < weekValue; i++) {
					let obj = {
						date: '',
						day: '',
						price: '',
						bgColor: 'none',
						color: '#ccc',
						status: 0
					}
					obj.day = totalDay - (weekValue - i) + 1;
					this.dayArr.push(obj);
				}
			},
			//补充后空白日期
			addAfterValue(weekValue) {
				let totalDay = new Date(this.year, this.month, 0).getDate();
				for (let i = 0; i < (6 - weekValue); i++) {
					let obj = {
						date: '',
						day: '',
						price: '',
						bgColor: 'none',
						color: '#ccc',
						status: 2
					}
					obj.day = i + 1;
					this.dayArr.push(obj);
				}
			},
			//日期时间的格式化
			formatNum(num) {
				return num < 10 ? '0' + num : num + '';
			},
			//上一个月
			prevMonth() {
				if (this.month == 0) {
					this.year -= 1;
					this.month = 11;
				} else {
					this.month -= 1
				}
				this.initDate(this.year, this.month)
			},
			//下一个月
			nextMonth() {
				if (this.month == 11) {
					this.year += 1;
					this.month = 0;
				} else {
					this.month += 1
				}
				this.initDate(this.year, this.month)
			},
			//输出
			onClick(obj, index) {
				
				this.$emit('click', dataObj)
			}
		}
	}
</script>

<style lang="scss" scoped>
	.item_today {
		background-color: #000;
	}
	.list {
		border-radius: 14rpx;
		padding-bottom: 20rpx;
		.day {
			font-weight: bold;
		color: #000 !important;
		}
		.price {
			font-weight: bold;
			display: flex;
			align-items: center;
		}
	}
	.item_red {
		background-color: rgba(249, 233, 233, 1);

		.price {
			
			color: rgba(208, 62, 48, 1) !important;
		}
	}
	.item_green {
		background-color: #e8f4e6;
		color: #4f913e;
			
		.price {
			
			color: #4f913e !important;
		}
	}
	.item_today {
		background: rgba(208, 62, 48, 1);
		.price {
			
			color: #fff !important;
		}
		.day {
			color: #fff !important;
		}
	}
	.item_today_green {
		background: #4f913e;
		.price {
			
			color: #fff !important;
		}
		.day {
			color: #fff !important;
		}
	}
	.item_dafult_no {
		background-color: #f1f1f1 !important;
	}
	.date_header_box {
		display: flex;
		align-items: center;
		justify-content: space-between;
		padding: 0 24rpx;
		background-color: #ff4e22;
		color: #fff;
		height: 90rpx;
		font-size: 23rpx;
		.day_text {
			font-size: 30rpx;
			font-weight: bold;
			display: flex;
			align-items: center;
			.day_text_icn {
				width: 28rpx;
				height: 28rpx;
				margin: 0 8rpx;
			}
		}
		.back_month, .next_month {
			flex: 1;
		}
		.back_month {
			display: flex;
			justify-content: flex-start;
			align-items: center;
			.qiehuan_icn {
				width: 22rpx;
				height: 22rpx;
				margin-right: 5rpx;
			}
		}
		.next_month {
			display: flex;
			justify-content: flex-end;
		}
	}
	.yu-calendar-header {
		display: -webkit-box;
		display: -webkit-flex;
		display: flex;
		padding: 12px 15px;
		background: #ff4e22;
		color: #fff;
	}

	.yu-calendar-header .header-left {
		font-size: 14px;
	}

	.yu-calendar-header .header-center {
		-webkit-box-flex: 1;
		-webkit-flex: 1;
		flex: 1;
		font-size: 16px;
		font-weight: bold;
	}

	.yu-calendar-header .header-right {
		font-size: 14px;
	}

	.yu-calendar-week {
		display: -webkit-box;
		display: -webkit-flex;
		display: flex;
		background: #ff4e22;
		color: #fff;
		padding: 0 5px;
	}

	.yu-calendar-week .list {
		-webkit-box-flex: 1;
		-webkit-flex: 1;
		flex: 1;
		font-size: 15px;
		line-height: 40px;
		display: flex;
		align-items: center;
		justify-content: center;
		padding-bottom: 0 !important;
	}

	.yu-calendar-day {
		display: -webkit-box;
		display: -webkit-flex;
		display: flex;
		flex-wrap: wrap;
		padding: 20px 5px;
		position: relative;
	}

	.yu-calendar-day .list {
		width: calc(100% / 5 - 12rpx);
		margin: 6rpx;
		height: 54px;
		display: flex;
		flex-flow: column;
		justify-content: center;
		align-items: center;
	}

	.yu-calendar-day .list .day {
		display: inline-block;
		width: 36px;
		height: 36px;
		line-height: 36px;
		border-radius: 18px;
		font-size: 16px;
		display: flex;
		align-items: center;
		justify-content: center;
		flex-flow: column;
	}

	.yu-calendar-day .list .price {
		font-size: 12px;
		line-height: 24px;
		height: 24px;
		overflow: hidden;
		white-space: nowrap;
		text-overflow: ellipsis;
		color: #ff4e22;
	}

	.yu-calendar-day .local-month {
		position: absolute;
		left: 50%;
		top: 50%;
		z-index: -1;
		font-size: 1px;
		width: 100px;
		height: 140px;
		margin-top: -70px;
		margin-left: -50px;
		text-align: center;
		color: #f5f6f7;
	}
</style>
